<template>
  <div class="activity_data">
    <div class="top_title">
      <h2 style="margin-bottom: 12px">{{ activityName }}</h2>
      <Button type="info" @click="goBack">返回</Button>
    </div>

    <div class="mid_box">
      <Tabs v-model="tabsVal" type="card" @on-click="changeTab" style="position: relative; z-index: 99999">
        <TabPane label="活动信息" name="1"></TabPane>
        <TabPane label="参与用户" name="2"></TabPane>
        <TabPane label="中奖信息" name="3"></TabPane>
      </Tabs>
    </div>
    <dt-info
      :label-width="150"
      v-if="tabsVal == '1'"
      ref="info1"
      :options="options"
      :info="info"
      style="width: 100%"></dt-info>
    <div class="table_title" v-if="tabsVal == '1'">奖项明细</div>
    <dt-search ref="searchUser" :xlBtn="4" v-if="tabsVal == '2'">
      <Button type="primary" @click="onExport">导出</Button>
    </dt-search>
    <dt-search ref="search" :xlBtn="4" v-if="tabsVal == '3'">
      <Button type="primary" @click="onExport">导出</Button>
    </dt-search>
    <dt-grid ref="table" :page="page" :onFetch="onFetch"></dt-grid>
  </div>
</template>

<script>
  import infoColumn from './opt/dataColumn.js'
  import SearchOpt from './opt/search.js'
  import infoMgr from './opt/info.js'
  import activityMgr from '@/biz/activity/activity'
  import purseMgr from './purseManage/biz/index.js'
  export default {
    data() {
      return {
        tabsVal: '1',
        activityName: '',
        page: {},
        parmas: {
          orgIds: [],
          housesId: null,
          housesName: null,
          userId: null
        },
        info: {},
        options: [],
        acId: '',
        needData: {}
      }
    },

    mounted() {
      this.acId = this.$route.query.acId
      this.options = infoMgr.options(this)
      this.$refs.table.init(this, new infoColumn(this))
      this.$refs.table.fetch()
    },

    methods: {
      goBack() {
        this.$router.go(-1)
      },
      onFetch(info) {
        if (this.tabsVal == 1) {
          this.needData = {
            ...info,
            acId: this.acId
          }
          return activityMgr.activitySummary(this.needData).then((res) => {
            this.info = res
            this.activityName = res.acName
            return res.lotteryMsg
          })
        } else if (this.tabsVal == 2) {
          this.needData = {
            ...info,
            acId: this.acId,
            userId: Number(this.parmas.userId) || null
          }
          return purseMgr.getAcActivityCustomerList(this.needData).then((res) => {
            console.log('表格数据', res)
            this.page.total = res.total
            return res.list
          })
        } else if (this.tabsVal == 3) {
          this.needData = {
            ...info,
            acId: this.acId,
            userId: Number(this.parmas.userId) || null
          }
          console.log('aaaa', this.needData)
          return activityMgr.lotteryMsgList(this.needData).then((res) => {
            console.log('ccc', res)
            this.page.total = res.total
            return res.list
          })
        }
      },
      // 导出
      onExport() {
        if (this.tabsVal == 2) {
          purseMgr.TakeUserExport(this.needData).then((res) => {
            console.log('导出参与用户')
          })
        } else if (this.tabsVal == 3) {
          activityMgr.exportLotteryMsgList(this.needData).then((res) => {
            console.log('导出中奖信息')
          })
        }
      },
      // 切换TAB
      changeTab(name) {
        if (name == '1') {
          this.page = {}
        } else if (name == '2') {
          this.parmas.userId = null
          this.parmas.housesId = null
          this.parmas.housesName = null
          this.parmas.orgIds = []
          this.$nextTick(() => {
            this.$refs.searchUser.init(this.$refs.table, new SearchOpt(), this.parmas)
            this.$set(this.page, 'total', 0)
          })
        } else if (name == '3') {
          this.parmas.userId = null
          this.parmas.housesId = null
          this.parmas.housesName = null
          this.parmas.orgIds = []
          this.$nextTick(() => {
            this.$refs.search.init(this.$refs.table, new SearchOpt(), this.parmas)
            this.$set(this.page, 'total', 0)
          })
        }
        this.$refs.table.init(this, new infoColumn(this))
        this.$refs.table.fetch()
      }
    }
  }
</script>

<style lang="scss" scoped>
  .top_title {
    display: flex;
    justify-content: space-between;
    padding-right: 24px;
  }
  .activity_data {
    padding: 24px;
  }
  .table_title {
    font-size: 18px;
  }
</style>
